<template>
	<div class="item-wapper" @click="go(item,$event)" v-if="item" @contextmenu.prevent.stop="$emit('menu', item)">
		<div class="item">
			<div class="head">
				<div class="logo">
					<!-- <el-image
					v-if="item.logo && (item.logo.startsWith('http://static.huxy.top/') || item.logo.startsWith('https://static.huxy.top/'))"
					:src="item.logo"
					lazy
				></el-image> -->
					<!-- <el-image v-else :src="item.logo"></el-image> -->
					<el-image lazy :src="item.logo">
						<template #error>
							<svg t="1660111518563" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="2094" width="200" height="200">
								<path
									d="M512.724 585.617c-39.687 0-75.663 21.92-93.885 57.208-3.232 6.259-0.779 13.951 5.48 17.185 6.258 3.231 13.953 0.779 17.185-5.481 13.826-26.771 41.117-43.402 71.221-43.402 30.105 0 57.394 16.631 71.221 43.402a12.756 12.756 0 0 0 11.343 6.906c1.97 0 3.97-0.459 5.842-1.425 6.258-3.233 8.713-10.926 5.48-17.185-18.224-35.288-54.198-57.208-93.887-57.208z"
									fill="#333333" p-id="2095"></path>
								<path
									d="M874.096 143.875H151.352c-28.982 0-52.676 23.692-52.676 52.676V709.74c0 28.984 23.693 52.677 52.676 52.677h39.335c2.53 7.36 6.901 14.721 13.342 21.621 1.61 1.61 3.68 2.762 5.981 3.451 66.017 17.022 82.348 38.185 86.03 49.226 4.371 12.421-2.76 22.312-3.221 23.003-4.14 5.29-3.221 13.112 2.071 17.482 5.52 4.371 13.341 3.45 17.711-2.071 5.981-7.591 14.262-25.763 7.591-46.005-9.432-27.834-43.015-49.915-100.061-65.098-4.831-5.751-6.211-10.35-6.211-14.031v-0.23c0-5.06 3.221-10.121 8.971-14.492 0 0 0.229-0.229 0.459-0.229 1.61-1.38 3.451-2.531 5.52-3.451l1.38-0.691c2.531-1.38 5.292-2.3 8.052-3.219 4.371-1.151 12.191-2.531 24.843-2.531 21.851 0 47.614 4.371 76.367 12.881 4.831 2.071 9.432 4.142 14.492 6.902 1.38 0.689 2.76 1.61 4.371 2.3 5.981 3.451 11.962 7.131 18.173 11.501 0.459 0.23 0.92 0.461 1.61 0.92 96.381 67.628 85.569 101.673 85.569 101.673-3.221 6.21-0.92 13.801 5.29 17.022 1.841 1.15 3.911 1.61 5.981 1.61 4.371 0 8.741-2.53 11.042-6.672 3.91-7.59 17.022-45.315-62.798-110.871h178.961c-79.82 65.557-66.708 103.282-62.798 110.871 2.301 4.142 6.672 6.672 11.042 6.672 2.069 0 4.14-0.461 5.981-1.61 6.21-3.221 8.511-10.812 5.29-17.022 0 0-10.812-34.045 85.569-101.673 0.691-0.459 1.151-0.689 1.61-0.92 6.211-4.371 12.192-8.05 18.173-11.501 1.61-0.689 2.99-1.61 4.371-2.3 5.06-2.76 9.661-4.831 14.492-6.902 28.753-8.511 54.516-12.881 76.367-12.881 12.653 0 20.473 1.38 24.843 2.531 2.76 0.92 5.52 1.839 8.052 3.219l1.38 0.691c2.069 0.92 3.91 2.071 5.52 3.451 0.23 0 0.459 0.229 0.459 0.229 5.751 4.371 8.971 9.432 8.971 14.492v0.23c0 3.681-1.38 8.281-6.211 14.031-57.046 15.182-90.629 37.264-100.061 65.098-6.67 20.242 1.61 38.414 7.591 46.005 4.371 5.52 12.191 6.441 17.711 2.071 5.292-4.371 6.211-12.192 2.071-17.482-0.461-0.691-7.591-10.582-3.221-23.003 3.681-11.041 20.012-32.204 86.03-49.226 2.301-0.689 4.371-1.841 5.981-3.451 6.441-6.901 10.812-14.262 13.342-21.621h39.335c28.982 0 52.676-23.693 52.676-52.677V196.551c0.003-28.984-23.691-52.676-52.673-52.676zM341.815 638.432c15.642 40.024 6.211 62.797-0.46 72.688-1.15-0.459-2.3-0.689-3.45-1.15-14.952-5.751-29.674-9.202-43.245-11.041-1.151-0.23-2.531-0.461-3.681-0.461-6.44-0.92-12.651-1.15-18.632-1.38-1.38 0-2.76 0.23-4.14 0.23-5.06 0.23-9.891 0.459-14.492 1.15-1.15 0-2.53 0.23-3.68 0.23-0.921 0.23-1.841 0.461-2.76 0.689 4.371-20.932 7.361-51.756-6.441-72.457-14.722-22.083-18.172-90.63-0.23-142.156 7.591-22.313-1.61-62.568-8.05-85.57h112.023c4.831 16.563 12.881 58.887-6.211 112.483l-1.38 3.68c-9.202 25.534-20.475 57.506 4.829 123.065z m442.8-11.502c-13.802 20.702-10.812 51.526-6.441 72.457l-2.76-0.689c-1.15 0-2.53-0.23-3.68-0.23-4.601-0.691-9.432-0.92-14.492-1.15-1.38 0-2.76-0.23-4.14-0.23-5.981 0.23-12.192 0.461-18.632 1.38-1.15 0-2.53 0.23-3.681 0.461-13.571 1.839-28.293 5.29-43.245 11.041-1.15 0.46-2.3 0.691-3.45 1.15-6.672-9.891-16.102-32.663-0.461-72.688 25.304-65.558 14.031-97.531 4.831-123.065l-1.38-3.68c-19.093-53.597-11.042-95.921-6.211-112.483h112.023c-6.44 23.003-15.642 63.257-8.05 85.57 17.941 51.526 14.491 120.073-0.231 142.156z m117.083 82.809c0 15.183-12.421 27.603-27.373 27.603h-39.564c-1.15-2.99-2.53-5.751-4.14-8.281v-0.23c-1.38-1.841-2.53-3.681-4.14-5.52-0.461-0.461-0.921-1.15-1.61-1.61l-0.691-0.691a65.525 65.525 0 0 0-5.98-5.29c-0.921-0.691-1.61-1.38-2.531-1.841-1.61-1.15-3.45-2.3-5.29-3.45-0.92-0.46-1.841-1.151-2.76-1.61-0.461-0.23-0.691-0.23-1.15-0.46-4.601-16.102-11.732-51.065-0.921-67.398 20.703-31.053 22.083-109.493 3.221-164.469-5.29-15.181 2.76-52.215 10.582-77.288h4.83c7.131 0 12.653-5.52 12.653-12.651 0-6.9-5.522-12.421-12.653-12.421h-163.32a12.369 12.369 0 0 0-12.421 12.421c0 5.06 2.76 8.971 6.9 11.271-5.751 22.313-11.732 66.708 8.05 122.144l1.38 3.91c8.052 22.774 17.252 48.537-4.601 105.583-17.941 46.005-8.511 76.139 0.921 92.241-0.921 0.46-1.61 0.92-2.53 1.38-6.902 3.68-13.802 8.05-20.703 12.651-0.691 0.461-1.61 0.92-2.3 1.38H389.89c-0.689-0.461-1.609-0.92-2.3-1.38-6.901-4.601-13.801-8.971-20.703-12.651-0.92-0.461-1.609-0.92-2.53-1.38 9.432-16.102 18.862-46.236 0.921-92.241-21.853-57.046-12.653-82.809-4.601-105.583l1.38-3.91c19.782-55.436 13.801-99.831 8.05-122.144 4.14-2.3 6.901-6.211 6.901-11.271 0-6.9-5.52-12.421-12.421-12.421H201.269c-7.131 0-12.653 5.52-12.653 12.421 0 7.131 5.522 12.651 12.653 12.651h4.83c7.822 25.073 15.872 62.107 10.582 77.288-18.862 54.977-17.482 133.416 3.221 164.469 10.811 16.332 3.68 51.295-0.921 67.398-0.459 0.23-0.689 0.23-1.15 0.46-0.92 0.459-1.841 1.15-2.76 1.61-1.841 1.15-3.68 2.3-5.29 3.45-0.921 0.461-1.61 1.15-2.531 1.841a65.793 65.793 0 0 0-5.98 5.29l-0.691 0.691c-0.689 0.46-1.15 1.15-1.61 1.61-1.61 1.839-2.76 3.68-4.14 5.52v0.23c-1.61 2.53-2.99 5.29-4.14 8.281h-39.564c-14.952 0-27.373-12.421-27.373-27.603V196.551c0-15.181 12.421-27.373 27.373-27.373h723.201c14.952 0 27.373 12.192 27.373 27.373v513.188z"
									fill="#333333" p-id="2096"></path>
							</svg>
						</template>
						<template #placeholder>
							<svg t="1660112100644" class="icon" viewBox="0 0 1024 1024" version="1.1"
								xmlns="http://www.w3.org/2000/svg" p-id="4811" width="200" height="200">
								<path
									d="M512 337.322667a26.666667 26.666667 0 0 1-26.666667-26.666667V197.333333a26.666667 26.666667 0 1 1 53.333334 0v113.322667c0 14.762667-11.946667 26.666667-26.666667 26.666667z"
									fill="#000000" p-id="4812"></path>
								<path
									d="M424.661333 360.746667a26.666667 26.666667 0 0 1-36.394666-9.728l-56.661334-98.133334a26.666667 26.666667 0 0 1 46.122667-26.666666l56.661333 98.133333a26.624 26.624 0 0 1-9.728 36.394667z"
									fill="#000000" opacity=".9" p-id="4813"></path>
								<path
									d="M360.746667 424.661333a26.624 26.624 0 0 1-36.394667 9.728l-98.133333-56.661333a26.624 26.624 0 1 1 26.666666-46.122667l98.133334 56.661334c12.714667 7.338667 17.066667 23.68 9.728 36.394666z"
									fill="#000000" opacity=".85" p-id="4814"></path>
								<path
									d="M337.322667 512c0 14.72-11.946667 26.666667-26.666667 26.666667H197.333333a26.666667 26.666667 0 1 1 0-53.333334h113.322667c14.762667 0 26.666667 11.946667 26.666667 26.666667z"
									fill="#000000" opacity=".8" p-id="4815"></path>
								<path
									d="M360.746667 599.338667a26.666667 26.666667 0 0 1-9.728 36.394666l-98.133334 56.661334a26.666667 26.666667 0 0 1-26.666666-46.122667l98.133333-56.661333a26.624 26.624 0 0 1 36.394667 9.728z"
									fill="#000000" opacity=".75" p-id="4816"></path>
								<path
									d="M424.661333 663.253333a26.624 26.624 0 0 1 9.728 36.394667l-56.661333 98.133333a26.624 26.624 0 1 1-46.122667-26.666666l56.661334-98.133334a26.666667 26.666667 0 0 1 36.394666-9.728z"
									fill="#000000" opacity=".7" p-id="4817"></path>
								<path
									d="M512 686.677333c14.72 0 26.666667 11.946667 26.666667 26.666667v113.322667a26.666667 26.666667 0 1 1-53.333334 0v-113.322667c0-14.762667 11.946667-26.666667 26.666667-26.666667z"
									fill="#000000" opacity=".65" p-id="4818"></path>
								<path
									d="M599.338667 663.253333a26.666667 26.666667 0 0 1 36.394666 9.728l56.661334 98.133334a26.666667 26.666667 0 0 1-46.122667 26.666666l-56.661333-98.133333a26.624 26.624 0 0 1 9.728-36.394667z"
									fill="#000000" opacity=".6" p-id="4819"></path>
								<path
									d="M663.253333 599.338667a26.624 26.624 0 0 1 36.394667-9.728l98.133333 56.661333a26.624 26.624 0 1 1-26.666666 46.122667l-98.133334-56.661334a26.666667 26.666667 0 0 1-9.728-36.394666z"
									fill="#000000" opacity=".55" p-id="4820"></path>
								<path
									d="M686.677333 512c0-14.72 11.946667-26.666667 26.666667-26.666667h113.322667a26.666667 26.666667 0 1 1 0 53.333334h-113.322667a26.666667 26.666667 0 0 1-26.666667-26.666667z"
									fill="#000000" opacity=".5" p-id="4821"></path>
								<path
									d="M663.253333 424.661333a26.666667 26.666667 0 0 1 9.728-36.394666l98.133334-56.661334a26.666667 26.666667 0 0 1 26.666666 46.122667l-98.133333 56.661333a26.624 26.624 0 0 1-36.394667-9.728z"
									fill="#000000" opacity=".4" p-id="4822"></path>
								<path
									d="M599.338667 360.746667a26.624 26.624 0 0 1-9.728-36.394667l56.661333-98.133333a26.624 26.624 0 1 1 46.122667 26.666666l-56.661334 98.133334a26.666667 26.666667 0 0 1-36.394666 9.728z"
									fill="#000000" opacity=".3" p-id="4823"></path>
							</svg>
						</template>
					</el-image>
					<!-- <img v-else :src="item.logo" alt="" /> -->
				</div>
				<div class="name"><i v-if="user && user.id === item.userId" class="el-icon-s-custom"></i> {{ item.name }}
				</div>
			</div>
			<div class="desc">{{ item.desc || '暂无描述信息' }}</div>
		</div>
	</div>
	<div class="item-wapper" v-else>
		<div class="item">
			<div class="head">
				<div class="logo">
					<el-skeleton-item variant="image" style="width: 100%;height: 100%;" />
				</div>
				<div class="name">
					<el-skeleton-item variant="text" :style="{ width: random(20, 70) + 'px' }" />
				</div>
			</div>
			<div class="desc">
				<el-skeleton-item variant="text" :style="{ width: random(70, 270) + 'px' }" />
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		item: Object
	},
	methods: {
		go(item,e) {
			if(e.shiftKey){
				this.$emit("nav-del",item)
			}else{
				window.open(this.item.url)
				this.$emit('nav-click',item)
			}
		},
		random(a, b) {
			if (isNaN(a)) {
				a = 0x7ffffff;
			}
			if (isNaN(b)) {
				return Math.floor(Math.random() * a);
			}
			return Math.floor(Math.random() * (b - a)) + a;
		}
	},
	computed: {
		user() {
			return this.$store.state.user.user
		}
	}
};
</script>

<style lang="scss">
.item-wapper {
	padding: 10px;
	width: 23% !important;
	--el-skeleton-color: var(--el-fill-color);

	&:hover {
		.item {
			transform: translateY(-10px);
			box-shadow: 1px 2px 4px #b2f7f8;
		}
	}

	.item {
		cursor: pointer;
		display: flex;
		flex-direction: column;
		gap: 10px;
		border: 1px solid #e4ecf3;
		box-shadow: 1px 2px 3px #f2f6f8;
		padding: 10px;
		border-radius: 7px;
		transition: all 0.2s;
		position: relative;

		.checkBox {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;

			.el-checkbox__input {
				position: absolute;
				right: 10px;
				top: 10px;
			}
		}

		.head {
			display: flex;

			.logo {
				width: 40px;
				height: 40px;
				min-width: 40px;

				.el-image__error {
					text-align: center;
				}

				.el-image {
					width: 100%;
					height: 100%;
				}

				img {
					border-radius: 50%;
					width: 100%;
					height: 100%;
				}

				svg {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				display: flex;
				align-items: center;
				padding-left: 10px;
				font-size: 14px;
				font-weight: 700;
				color: #3273dc;
				width: 100%;
			}
		}

		.desc {
			color: gray;
			font-size: 12px;
			padding-top: 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			height: 35px;
		}
	}
}

@media screen and (max-width: 1550px) {
	.item-wapper {
		width: 31% !important;
	}
}

@media screen and (max-width: 1370px) {
	.item-wapper {
		width: 46% !important;
	}
}

@media screen and (max-width: 900px) {
	.item-wapper {
		width: 100% !important;
	}
}

@keyframes route {
	0% {
		transform: rotateZ(0deg);
	}

	100% {
		transform: rotateZ(360deg);
	}
}
</style>
